<template>
    <div class="cmt-container">
        <h3>发表评论</h3>
        <hr>
        <textarea maxlength="120" cols="30" rows="10" placeholder="请输入内容" v-model="com"></textarea>
        <button class="mui-btn mui-btn-primary" @click="post">发表评论</button>
        <div class="cmt-list">
            <div v-for="(item,index) in comments" :key="item.add_time" class="cmt-item">
                <div  class="cmt-title">
                    第{{index+1}}楼&nbsp;&nbsp;用户：{{item.user_name}}&nbsp;&nbsp;发表时间：{{item.add_time | dataFormat}}
                </div>
                <div class="cmt-body">
                    {{item.content === ''?'此用户未评论':item.content}}
                </div>
            </div>
        </div>
        <button type="button" class="mui-btn mui-btn-danger mui-btn-outlined" @click="getmore">加载更多</button>


    </div>
</template>

<script>
export default {
    data() {
        return {
            pageIndex: 1,  // 默认展示第一页数据
            comments: [],
            com: ''
        }
    },
    props: ["id"],
    created() {
        this.getcomment();
    },
    methods: {
        getcomment() {
            this.$http.get("api/getcomments/"+this.id+"?pageindex="+this.pageIndex).then(result=> {
                console.log(result);
                 if(result.body.status === 0) {
                    this.comments = result.body.message;
                } else {
                    alert("获取数据失败");
                }
            })
        },
        getmore() {
            this.pageIndex++;
             this.$http.get("api/getcomments/"+this.id+"?pageindex="+this.pageIndex).then(result=> {
                console.log(result);
                 if(result.body.status === 0) {
                     // 拼接数据
                    this.comments = this.comments.concat(result.body.message);
                } else {
                    alert("获取数据失败");
                }
            })
        },
        post() {
            if(this.com === "") {
                alert("发表评论不能为空");
            } else {
                // post 请求  参数一：请求的URL地址   
                        //  参数二：提交给服务器的数据对象{content：this.com}
                        // 参数三：定义提交时  表单中数据的格式 {emulateJSON: true}
                this.$http.post("api/postcomment/"+this.$route.params.id, {content: this.com.trim()}).then(result => {
                    if(result.body.status === 0) {
                        var cmmt = {user_name: '匿名用户',add_time: Date.now(), content: this.com.trim() };
                        this.comments.unshift(cmmt);
                        this.com = "";
                    }
                })
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.cmt-container {
    h3 {
        font-size: 18px;
    }
    textarea {
        font-size: 14px;
        height: 85px;
        margin: 0;
    }

    .cmt-list {
        margin: 5px 0;
           .cmt-item { 
               font-size: 12px;
           .cmt-title {
               background-color: #ccc;   
               line-height: 30px;
           }
           .cmt-body {
               line-height: 35px;
               text-indent: 2em;
           }
        }
    }
    button {
        width: 100%;
    }
    
}
</style>
